<template>
    <div class="index-container-ty">
        <a-spin :spinning="loading">
            <a-row type="flex" justify="start" :gutter="3">
                <a-col :sm="24" :lg="12">
                    <a-card>
                        <div slot="title" class="index-md-title">
                            <img src="../../assets/daiban.png"/>
                            我的待办【{{ dataSource1.length }}】
                        </div>
                        <div slot="extra">
                            <a v-if="dataSource1 && dataSource1.length>0" slot="footer" @click="goPage">更多
                                <a-icon type="double-right"/>
                            </a>
                        </div>
                        <a-table
                                :class="'my-index-table tytable1'"
                                ref="table1"
                                size="small"
                                rowKey="id"
                                :columns="columns"
                                :dataSource="dataSource1"
                                :pagination="false">
                            <template slot="ellipsisText" slot-scope="text">
                                <j-ellipsis :value="text" :length="textMaxLength"></j-ellipsis>
                            </template>

                            <template slot="dayWarnning" slot-scope="text,record">
                                <a-icon type="bulb" theme="twoTone" style="font-size:22px"
                                        :twoToneColor="getTipColor(record)"/>
                            </template>

                            <span slot="action" slot-scope="text, record">
                                <a @click="handleData">办理</a>
                            </span>

                        </a-table>
                    </a-card>
                </a-col>

                <a-col :sm="24" :lg="12">
                    <a-card>
                        <div slot="title" class="index-md-title">
                            <img src="../../assets/zaiban.png"/>
                            我的在办【{{ dataSource2.length }}】
                        </div>
                        <div slot="extra">
                            <a v-if="dataSource2 && dataSource2.length>0" slot="footer" @click="goPage">更多
                                <a-icon type="double-right"/>
                            </a>
                        </div>
                        <a-table
                                :class="'my-index-table tytable2'"
                                ref="table2"
                                size="small"
                                rowKey="id"
                                :columns="columns"
                                :dataSource="dataSource2"
                                :pagination="false">
                            <template slot="ellipsisText" slot-scope="text">
                                <j-ellipsis :value="text" :length="textMaxLength"></j-ellipsis>
                            </template>

                            <template slot="dayWarnning" slot-scope="text,record">
                                <a-icon type="bulb" theme="twoTone" style="font-size:22px"
                                        :twoToneColor="getTipColor(record)"/>
                            </template>

                            <span slot="action" slot-scope="text, record">
                                <a @click="handleData">办理</a>
                            </span>
                        </a-table>
                    </a-card>
                </a-col>

                <a-col :span="24">
                    <div style="height: 5px;"></div>
                </a-col>

                <a-col :sm="24" :lg="12">
                    <a-card>
                        <div slot="title" class="index-md-title">
                            <img src="../../assets/guaz.png"/>
                            我的挂账【{{ dataSource4.length }}】
                        </div>
                        <a-table
                                :class="'my-index-table tytable4'"
                                ref="table4"
                                size="small"
                                rowKey="id"
                                :columns="columns"
                                :dataSource="dataSource4"
                                :pagination="false">
                            <template slot="ellipsisText" slot-scope="text">
                                <j-ellipsis :value="text" :length="textMaxLength"></j-ellipsis>
                            </template>

                            <template slot="dayWarnning" slot-scope="text,record">
                                <a-icon type="bulb" theme="twoTone" style="font-size:22px"
                                        :twoToneColor="getTipColor(record)"/>
                            </template>

                            <span slot="action" slot-scope="text, record">
                                <a @click="handleData">办理</a>
                            </span>

                        </a-table>
                    </a-card>
                </a-col>

                <a-col :sm="24" :lg="12">
                    <a-card>
                        <div slot="title" class="index-md-title">
                            <img src="../../assets/duban.png"/>
                            我的督办【{{ dataSource3.length }}】
                        </div>
                        <a-table
                                :class="'my-index-table tytable3'"
                                ref="table3"
                                size="small"
                                rowKey="id"
                                :columns="columns"
                                :dataSource="dataSource3"
                                :pagination="false">
                            <template slot="ellipsisText" slot-scope="text">
                                <j-ellipsis :value="text" :length="textMaxLength"></j-ellipsis>
                            </template>

                            <template slot="dayWarnning" slot-scope="text,record">
                                <a-icon type="bulb" theme="twoTone" style="font-size:22px"
                                        :twoToneColor="getTipColor(record)"/>
                            </template>

                            <span slot="action" slot-scope="text, record">
                                <a @click="handleData">办理</a>
                            </span>

                        </a-table>
                    </a-card>
                </a-col>

            </a-row>
        </a-spin>

    </div>
</template>

<script>
  import noDataPng from '@/assets/nodata.png'
  import JEllipsis from '@/components/jeecg/JEllipsis'

  const tempSs1 = [{
    id: "001",
    orderNo: "电[1]1267102",
    orderTitle: "药品出问题了",
    restDay: 1
  }, {
    id: "002",
    orderNo: "电[4]5967102",
    orderTitle: "吃了xxx医院的药，病情越来越严重",
    restDay: 0
  }, {
    id: "003",
    orderNo: "电[3]5988987",
    orderTitle: "今天去超市买鸡蛋，鸡蛋都是坏的",
    restDay: 7
  }, {
    id: "004",
    orderNo: "电[2]5213491",
    orderTitle: "xx宝实体店高价售卖xx",
    restDay: 5
  }, {
    id: "005",
    orderNo: "电[1]1603491",
    orderTitle: "以红利相诱，答应退保后扣一年费用",
    restDay: 0
  }]

  const tempSs2 = [{
    id: "001",
    orderTitle: "我要投诉这个大超市",
    orderNo: "电[1]10299456",
    restDay: 6
  }, {
    id: "002",
    orderTitle: "xxx医院乱开药方,售卖假药",
    orderNo: "电[2]20235691",
    restDay: 0
  }, {
    id: "003",
    orderTitle: "我想问问这家店是干啥的",
    orderNo: "电[3]495867322",
    restDay: 7
  }, {
    id: "004",
    orderTitle: "我要举报朝阳区奥森公园酒店",
    orderNo: "电[2]1193849",
    restDay: 3
  }, {
    id: "005",
    orderTitle: "我今天吃饭吃到一个石头子",
    orderNo: "电[4]56782344",
    restDay: 9
  }]

  //4-7天
  const tip_green = "rgba(0, 255, 0, 1)"
  //1-3天
  const tip_yellow = "rgba(255, 255, 0, 1)"
  //超期
  const tip_red = "rgba(255, 0, 0, 1)"

  export default {
    name: "IndexTask",
    components: { JEllipsis },
    data() {
      return {
        loading: false,
        textMaxLength: 8,
        dataSource1: [],
        dataSource2: [],
        dataSource3: [],
        dataSource4: [],
        columns: [
          {
            title: '',
            dataIndex: '',
            key: 'rowIndex',
            width: 50,
            fixed: 'left',
            align: "center",
            scopedSlots: { customRender: "dayWarnning" }
          },
          {
            title: '剩余天数',
            align: "center",
            dataIndex: 'restDay',
            width: 80
          },
          {
            title: '工单标题',
            align: "center",
            dataIndex: 'orderTitle',
            scopedSlots: { customRender: "ellipsisText" }
          },
          {
            title: '工单编号',
            align: "center",
            dataIndex: 'orderNo'
          },
          {
            title: '操作',
            dataIndex: 'action',
            align: "center",
            scopedSlots: { customRender: 'action' }
          }
        ]

      }
    },
    created() {
      this.mock();
    },
    mounted() {

    },
    methods: {
      getTipColor(rd) {
        let num = rd.restDay
        if (num <= 0) {
          return tip_red
        } else if (num >= 1 && num < 4) {
          return tip_yellow
        } else if (num >= 4) {
          return tip_green
        }
      },
      goPage() {
        this.$message.success("请根据具体业务跳转页面")
        //this.$router.push({ path: '/comp/mytask' })
      },
      mock() {
        this.dataSource1 = tempSs1
        this.dataSource2 = tempSs2
        this.dataSource3 = tempSs1
        this.dataSource4 = []
        this.ifNullDataSource(this.dataSource4, '.tytable4')
      },

      ifNullDataSource(ds, tb) {
        this.$nextTick(() => {
          if (!ds || ds.length == 0) {
            var tmp = document.createElement('img');
            tmp.src = noDataPng
            tmp.width = 300
            let tbclass = `${tb} .ant-table-placeholder`
            document.querySelector(tbclass).innerHTML = ""
            document.querySelector(tbclass).appendChild(tmp)
          }
        })
      },
      handleData() {
        this.$message.success("办理完成")
      }

    }
  }
</script>

<style>
    .my-index-table {
        height: 270px
    }

    .my-index-table table {
        font-size: 14px !important;
    }

    .index-container-ty .ant-card-head-title {
        padding-top: 6px;
        padding-bottom: 6px;
    }

    .index-container-ty .ant-card-extra {
        padding: 0
    }

    .index-container-ty .ant-card-extra a {
        color: #fff
    }

    .index-container-ty .ant-card-extra a:hover {
        color: #152ede
    }

    .index-container-ty .ant-card-head-wrapper, .index-container-ty .ant-card-head {
        line-height: 24px;
        min-height: 24px;
        /*background: #90aeff;*/
        background: #7196fb;
    }

    .index-container-ty .ant-card-body {
        padding: 10px 12px 0px 12px
    }

    /* .index-container-ty .ant-card-actions{background: #fff}
     .index-container-ty .ant-card-actions li {margin:2px 0;}
     .index-container-ty .ant-card-actions > li > span{width: 100%}*/

    .index-container-ty .ant-table-footer {
        text-align: right;
        padding: 6px 12px 6px 6px;
        background: #fff;
        border-top: 2px solid #f7f1f1;
    }

    .index-md-title {
        postion: relative;
        padding-left: 24px;
        width: 100%;
        color: #fff;
        font-size: 21px;
        font-family: cursive;
    }

    .index-md-title img {
        position: absolute;
        height: 32px;
        top: 2px;
        left: 14px;
    }

    .index-container-ty .ant-card-body {
        /*border-left:1px solid #90aeff;
        /*border-right:1px solid #90aeff;
        border-bottom:1px solid #90aeff;*/
    }

    .index-container-ty .ant-table-thead > tr > th,
    .index-container-ty .ant-table-tbody > tr > td {
        border-bottom: 1px solid #90aeff;
    }

    .index-container-ty .ant-table-small > .ant-table-content > .ant-table-fixed-left > .ant-table-body-outer > .ant-table-body-inner > table > .ant-table-thead > tr > th,
    .index-container-ty .ant-table-small > .ant-table-content > .ant-table-fixed-right > .ant-table-body-outer > .ant-table-body-inner > table > .ant-table-thead > tr > th {
        border-bottom: 1px solid #90aeff;
    }

    .index-container-ty .ant-table-small > .ant-table-content > .ant-table-scroll > .ant-table-body > table > .ant-table-thead > tr > th {
        border-bottom: 1px solid #90aeff;
    }

    .index-container-ty .ant-table-small {
        border: 1px solid #90aeff;
    }

    .index-container-ty .ant-table-placeholder {
        padding: 0
    }
</style>
